<template>
  <a-modal :title="'合同信息'" :visible="true" width="60%" @ok="submit" @cancel="reset">
    <div style="display:flex;    justify-content: center;">
      <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
        :data="{ type: 2 }" :fileList="fileList" :beforeUpload="beforeUpload" @change="handleChange">
        <a-button>选择文件 </a-button>
      </a-upload>
    </div>

  </a-modal>
</template>
  
<script>
import { postAction, getAction } from '@/api/manage'
import { uploadFile } from '@api/pattern/index.js'

import { pattern } from '@api/pattern/index'
export default {
  props: {
    patternId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      patt: 'api/gateway/imagemanage-center/',
      uploadFile,
      loading: true,
      brand: [],
      inputVisible: false,
      accountInfo: [],
      fileList: [],
      inputValue: '',
      form: this.$form.createForm(this),
      dataList: [],
      groupId: '',
      list: [],
      groupList: [],
      showTable: false
    }
  },

  created() {
    const { account } = this.$props
    if (account) {
      this.formTile = '编辑'
      this.brand = account.brand
      this.accountInfo = account
      this.tags = account.tag
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
  },
  mounted() {
    this.loadData()
    //   this.getGroupList()
  },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    beforeUpload(file, fileList) {
      return new Promise((resolve, reject) => {
        if (file) {
          const size = file.size / 1024 / 1024
          if (size > 5) {
            this.$message.error('文件大小不能超过5M')
            reject(file)
          }
          resolve(file)
        }
      })
    },
    handleChange(info) {
      let fileList = [...info.fileList]
      this.fileList = info.fileList
      if (info.file.status === 'uploading') {
        this.uploading = true
        return
      }
      if (info.file.status === 'done') {
        this.uploading = false
        let list = fileList.map(file => {
          if (file.response) {
            if (file.response.code == 200) {
              file.url = file.response.data.url
            } else {
              this.$message.error('文件上传失败')
              this.fileList.pop()
              return fileList
            }
          }
          return file
        })
        this.fileList = list

      }
      if (info.file.status === 'error') {
        this.$message.error('文件上传失败')
      }
    },
    reset() {
      this.form.resetFields()
      this.$emit('closeContact')
    },
    loadData() {
      const params = {
        patternId: this.patternId
      }
      try {
        getAction(`${pattern}pattern/contract/info`, params).then(data => {
          if (data.code == 200) {
            if (data.data.length) {
              const list = data.data[0].split(',')
              console.log(list);
              this.fileList = list.map(item => {
                const result = item.split('-')
                return {
                  name: result[0],
                  uid: result[1],
                  status: 'done',
                  url: result[1]
                }
              })
            }
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    selectBrand(brand) {
      this.brand = brand
    },
    selectGroup(group) {
      this.groupId = group.target.value
    },
    submit() {
      console.log(this.fileList);
      if (!this.fileList.length) {
        this.$message.warning('请先上传文件！')
      } else {
        const contractUrl = []
        this.fileList.map((item) => {
          contractUrl.push(item.name + '-' + item.url)
        })
        const params = {
          contractUrl: contractUrl.toString(),
          patternId: this.patternId,
          jobNumber: this.jobNumber
        }
        try {
          postAction(`${pattern}pattern/contract/update`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('保存成功！')
              this.reset()
            } else {
              this.$message.warning(data.msg)
            }
            this.loading = false
          })
        } catch (error) {
          this.loading = false
        }
      }

    }
  }
}
</script>
  
<style scoped lang="less">
.main {
  // display: flex;
}

.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}
</style>
  